import Vue from 'vue'
import VueRouter from 'vue-router'

// Page
import Index from '../views/Index'
import Login from '../views/Login'
import Goods from '../views/Goods'
import Goods_Detail from '../views/Goods_Detail'
import Bid_Detail from '../views/Bid_Detail'
import Verify from '../views/Verify'
import Blogs from '../views/Blogs'
import Blog_Detail from '../views/Blog_Detail'
import Notes from '../views/Notes'
import Space from '../views/Space'
import Order from '../views/Order'
import User from '../views/User'

// ChildrenPage
import Profile from '../views/User/Profile'
import Shop from '../views/User/Shop'
import Publish from '../views/User/Publish'
import Password from '../views/User/Password_Reset'
import BlogManagement from '../views/User/Blog_Management'
import NoteManagement from '../views/User/Note_Management'
import NoteCommentManagement from '../views/User/Note_Comment_Management'
import BlogCommentManagement from '../views/User/Blog_Comment_Management'
import GoodsManagement from '../views/User/Goods_Management'
import OrderManagement from '../views/User/Order_Management'

// Layout
import MainHeader from '../layout/MainHeader.vue';
import MainFooter from '../layout/MainFooter.vue';

Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'index',
    components: {
      default: Index,
      header: MainHeader,
      footer: MainFooter
    },
    props: {
      header: {
        colorOnScroll: 500
      }
    }
  },
  {
    path: '/login',
    name: 'login',
    components: {
      default: Login,
      header: MainHeader,
      footer: MainFooter
    },
    props: {
      header: {
        colorOnScroll: 0,
        activeName: 'login'
      },
    }
  },
  {
    path: '/goods',
    name: 'goods',
    components: {
      default: Goods,
      header: MainHeader,
      footer: MainFooter
    },
    props: {
      header: {
        colorOnScroll: 249,
        activeName: 'goods'
      }
    },
    meta: {
      requireAuth: false  // no need to login
    } 
  },
  {
    path: '/goods/:id',
    name: 'goods_detail',
    components: {
      default: Goods_Detail,
      header: MainHeader,
      footer: MainFooter
    },
    props: {
      header: {
        colorOnScroll: 0,
        activeName: ''
      }
    }
  },
  {
    path: '/bid_goods/:id',
    name: 'bid_detail',
    components: {
      default: Bid_Detail,
      header: MainHeader,
      footer: MainFooter
    },
    props: {
      header: {
        colorOnScroll: 0,
        activeName: ''
      }
    }
  },
  {
    path: '/order',
    name: 'order',
    components: {
      default: Order,
      header: MainHeader,
      footer: MainFooter
    },
    props: {
      header: {
        colorOnScroll: 0,
        activeName: ''
      }
    }
  },
  {
    path: '/verify',
    name: 'verify',
    components: {
      default: Verify,
      header: MainHeader,
      footer: MainFooter
    },
    props: {
      header: {
        colorOnScroll: 0,
        activeName: 'verify'
      }
    }
  },
  {
    path: '/space/:id',
    name: 'space',
    components: {
      default: Space,
      header: MainHeader
    },
    props: {
      default: true, // 通过props解耦
      header: {
        colorOnScroll: 0,
        activeName: ''
      }
    },
    meta: {
      requireAuth: true
    }
  },
  {
    path: '/blogs',
    name: 'blogs',
    components: {
      default: Blogs,
      header: MainHeader

    },
    props: {
      header: {
        colorOnScroll: 300,
        activeName: 'blogs'
      }
    },
  },
  {
    path: '/blog/:id',
    name: 'blog_detail',
    components: {
      default: Blog_Detail,
      header: MainHeader,
      footer: MainFooter
    },
    props: {
      header: {
        colorOnScroll: 0,
        activeName: 'blogs'
      }
    }
  },
  {
    path: '/notes',
    name: 'notes',
    components: {
      default: Notes,
      header: MainHeader
    },
    props: {
      header: {
        colorOnScroll: 0,
        activeName: 'notes'
      }
    },
    meta: {
      requireAuth: true
    }
  },
  {
    path: '/user/:uid',
    name: 'user',
    components: {
      default: User,
      header: MainHeader,
      footer: MainFooter
    },
    props: {
      default: true,
      header: {
        colorOnScroll: 70,
        activeName: ''
      }
    },
    meta: {
      requireAuth: true
    },
    children: [{
        path: 'profile',
        name: 'profile',
        component: Profile,
        props: true
      },
      {
        path: 'shop',
        name: 'shop',
        component: Shop,
        props: true
      },
      {
        path: 'password_reset',
        component: Password,
        props: true
      },
      {
        path: 'publish',
        name: 'publish',
        component: Publish,
        props: {
          default: true,
          header: {
            colorOnScroll: 0,
          }
        },
      },
      {
        path: 'blog',
        name: 'blog',
        component: BlogManagement,
        props: true,
      },
      {
        path: 'note',
        name: 'note',
        component: NoteManagement,
        props: true,
      },
      {
        path: 'note_comments',
        name: 'note_comments',
        component: NoteCommentManagement,
        props: true,
      },
      {
        path: 'blog_comments',
        name: 'blog_comments',
        component: BlogCommentManagement,
        props: true,
      },
      {
        path: 'goods_management',
        name: 'goods_management',
        component: GoodsManagement,
        props: true,
      },
      {
        path: 'order_management',
        name: 'order_management',
        component: OrderManagement,
        props: true,
      },
    ]
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router